<template>
    <div class="announcement">
        <div  class="containeriy">
            <h3>公告</h3>
          <el-link type="primary" @click="goToMore">查看更多</el-link>
        </div>
        <div v-for="(content, index) in contents" :key="index" class="containeri">
          <el-tag>{{ content.title }}</el-tag>   
           <p class="content-body">{{ content.body }}</p>
        </div>   
        <div  class="containeri">
          <el-tag type="success">成功</el-tag>   
           <p class="content-body">植物医生发布成功！</p>
        </div>   
        <div  class="containeri">
          <el-tag type="warning">活动</el-tag>   
           <p class="content-body">植物医生充值系统即将上线</p>
        </div>  
        <div  class="containeri">
          <el-tag type="danger">告警</el-tag>   
           <p class="content-body">注意系统安全性</p>
        </div>  
    </div>
  </template>
  
  <script>
  export default {
    name: 'Announcement',
    props: {
      type: {
        type: String,
        default: 'info',
      },
      title: {
        type: String,
        default: '公告',
      },
      contents: {
        type: Array,
        default: () => [
          {
            title: '通知',
            body: '步骤操作成功',
          }
        ],
      },
    },
    methods: {
      goToMore() {
        // TODO: 跳转至更多页面的逻辑
      },
    },
  };
  </script>
  <style>
.containeri {
  display: flex;
  align-items: center;
}
.containeriy {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.el-tag{
    margin-right: 20px;
}

</style>